<!-- by 7527_18_920 -->
<template>
    <a-row :gutter="10">
        <a-col :md="12" :sm="24">
            <a-card :bordered="false">
                <!-- 按钮操作区域 -->
                <a-row style="margin-left: 14px">
                    <a-button v-if="btnEnableList.indexOf(1)>-1" @click="handleAdd()" type="primary">添加类别</a-button>
                    <a-button v-if="btnEnableList.indexOf(1)>-1" title="删除多条数据" @click="batchDel"
                        type="default">批量删除</a-button>
                    <a-button @click="refresh" type="default" icon="reload">刷新</a-button>
                    <a-input-search v-model="treeSearchValue" style="margin-left:3px;width:200px" placeholder="请输入"
                        @search="onTreeSearch" />
                </a-row>
                <a-row style="margin-left: 14px">

                </a-row>
                <div style="background: #fff;padding-left:16px;height: 100%; margin-top: 5px">
                    <a-alert type="info" :showIcon="true">
                        <div slot="message">
                            当前选择：<span v-if="this.currSelected.title">{{ getCurrSelectedTitle() }}</span>
                            <a v-if="this.currSelected.title" style="margin-left: 10px"
                                @click="onClearSelected">取消选择</a>
                        </div>
                    </a-alert>
                    <!-- 树-->
                    <a-col :md="10" :sm="24">
                        <template>
                            <a-dropdown :trigger="[this.dropTrigger]" @visibleChange="dropStatus">
                                <span style="user-select: none">
                                    <a-tree checkable multiple @select="onSelect" @check="onCheck"
                                        @rightClick="rightHandle" :selectedKeys="selectedKeys"
                                        :checkedKeys="checkedKeys" :treeData="filteredTreeData"
                                        :checkStrictly="checkStrictly" :expandedKeys="iExpandedKeys"
                                        :autoExpandParent="true" @expand="onExpand" />
                                </span>
                            </a-dropdown>
                        </template>
                    </a-col>
                </div>
            </a-card>
            <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
            <div class="drawer-bootom-button">
                <a-dropdown :trigger="['click']" placement="topCenter">
                    <a-menu slot="overlay">
                        <a-menu-item key="1" @click="switchCheckStrictly(1)">父子关联</a-menu-item>
                        <a-menu-item key="2" @click="switchCheckStrictly(2)">取消关联</a-menu-item>
                        <a-menu-item key="3" @click="checkALL">全部勾选</a-menu-item>
                        <a-menu-item key="4" @click="cancelCheckALL">取消全选</a-menu-item>
                        <a-menu-item key="5" @click="expandAll">展开所有</a-menu-item>
                        <a-menu-item key="6" @click="closeAll">合并所有</a-menu-item>
                    </a-menu>
                    <a-button>
                        树操作 <a-icon type="up" />
                    </a-button>
                </a-dropdown>
            </div>
            <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
        </a-col>
        <a-col :md="12" :sm="24">
            <a-card :bordered="false" v-if="selectedKeys.length>0">
                <a-form :form="form">
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
                        <a-input placeholder="请输入名称" v-decorator="['name', validatorRules.name ]" />
                    </a-form-item>
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="编号">
                        <a-input placeholder="请输入编号" v-decorator="['serialNo', validatorRules.serialNo ]" />
                    </a-form-item>
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级目录">
                        <a-tree-select style="width:100%" :dropdownStyle="{maxHeight:'200px',overflow:'auto'}"
                            allow-clear :treeDefaultExpandAll="true" :treeData="treeData" v-decorator="[ 'parentId' ]"
                            placeholder="请选择上级目录">
                        </a-tree-select>
                    </a-form-item>
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
                        <a-input v-decorator="[ 'sort' ]" />
                    </a-form-item>
                    <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
                        <a-textarea placeholder="请输入备注" :rows="2" v-decorator.trim="[ 'remark' ]" />
                    </a-form-item>
                </a-form>
                <div class="anty-form-btn">
                    <a-button @click="emptyCurrForm" type="default" htmlType="button" icon="sync">重置</a-button>
                    <a-button @click="submitCurrForm" type="primary" htmlType="button" icon="form">保存</a-button>
                </div>
            </a-card>
            <a-card v-else>
                <a-empty>
                    <span slot="description"> 请先选择一个类别! </span>
                </a-empty>
            </a-card>
        </a-col>
        <material-category-modal ref="materialCategoryModal" @ok="loadTree"></material-category-modal>
    </a-row>
</template>
<script>
import MaterialCategoryModal from '../material/modules/MaterialCategoryModal'
import pick from 'lodash.pick'
import { queryMaterialCategoryTreeList, queryMaterialCategoryById, checkMaterialCategory } from '@/api/api'
import { httpAction, deleteAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
export default {
    name: 'MaterialCategoryList',
    mixins: [JeecgListMixin],
    components: {
        MaterialCategoryModal,
    },
    data() {
        return {
            iExpandedKeys: [],
            loading: false,
            currFlowId: '',
            currFlowName: '',
            disable: true,
            treeData: [],
            visible: false,
            categoryTree: [],
            rightClickSelectedKey: '',
            rightClickSelectedOrgCode: '',
            hiding: true,
            model: {},
            dropTrigger: '',
            category: {},
            disableSubmit: false,
            checkedKeys: [],
            selectedKeys: [],
            autoIncr: 1,
            currSelected: {},
            allTreeKeys: [],
            checkStrictly: true,
            form: this.$form.createForm(this),
            labelCol: {
                xs: { span: 24 },
                sm: { span: 5 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
            graphDatasource: {
                nodes: [],
                edges: [],
            },
            validatorRules: {
                name: {
                    rules: [{ required: true, message: '请输入名称!' }, { validator: this.validateName }],
                },
                serialNo: { rules: [{ required: true, message: '请输入编号!' }] },
            },
            url: {
                delete: '/materialCategory/delete',
                edit: '/materialCategory/update',
                deleteBatch: '/materialCategory/deleteBatch',
            },
            orgCategoryDisabled: false,
            treeSearchValue: '',
            filteredTreeData: [],
        }
    },
    computed: {
        importExcelUrl: function () {
            return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
        },
        // filteredTreeData() {
        //     let originalData = JSON.parse(JSON.stringify(this.categoryTree))
        //     if (!this.treeSearchValue) return originalData

        //     const filter = (data) => {
        //         return data.filter((item) => {
        //             const match = item.title.toLowerCase().includes(this.treeSearchValue.toLowerCase())
        //             if (item.children && item.children.length > 0) {
        //                 item.children = filter(item.children)
        //             }
        //             return match || (item.children && item.children.length > 0)
        //         })
        //     }
        //     return filter(originalData)
        // },
    },

    methods: {
        loadData() {
            this.refresh()
        },
        loadTree() {
            let that = this
            that.treeData = []
            that.categoryTree = []
            let params = {}
            params.id = ''
            queryMaterialCategoryTreeList(params).then((res) => {
                if (res) {
                    //类别全选后，再添加类别，选中数量增多
                    this.allTreeKeys = []
                    for (let i = 0; i < res.length; i++) {
                        let temp = res[i]
                        that.categoryTree.push(temp)
                        that.setThisExpandedKeys(temp)
                        that.getAllKeys(temp)
                    }
                    this.filteredTreeData = JSON.parse(JSON.stringify(that.categoryTree))
                    this.loading = false
                }
            })
        },
        setThisExpandedKeys(node) {
            if (node.children && node.children.length > 0) {
                this.iExpandedKeys.push(node.key)
                for (let a = 0; a < node.children.length; a++) {
                    this.setThisExpandedKeys(node.children[a])
                }
            }
        },
        refresh() {
            this.treeSearchValue = ''
            this.loading = true
            this.loadTree()
        },
        // 右键操作方法
        rightHandle(node) {
            this.dropTrigger = 'contextmenu'
            console.log(node.node.eventKey)
            this.rightClickSelectedKey = node.node.eventKey
            this.rightClickSelectedOrgCode = node.node.dataRef.orgCode
        },
        onExpand(expandedKeys) {
            console.log('onExpand', expandedKeys)
            this.iExpandedKeys = expandedKeys
        },
        backFlowList() {
            this.$router.back(-1)
        },
        // 右键点击下拉框改变事件
        dropStatus(visible) {
            if (visible == false) {
                this.dropTrigger = ''
            }
        },
        // 右键店家下拉关闭下拉框
        closeDrop() {
            this.dropTrigger = ''
        },
        addRootNode() {
            this.$refs.nodeModal.add(this.currFlowId, '')
        },
        batchDel: function () {
            console.log(this.checkedKeys)
            if (this.checkedKeys.length <= 0) {
                this.$message.warning('请选择一条记录！')
            } else {
                let ids = ''
                for (let a = 0; a < this.checkedKeys.length; a++) {
                    ids += this.checkedKeys[a] + ','
                }
                let that = this
                this.$confirm({
                    title: '确认删除',
                    content: '确定要删除所选中的 ' + this.checkedKeys.length + ' 条数据吗?',
                    onOk: function () {
                        deleteAction(that.url.deleteBatch, { ids: ids }).then((res) => {
                            if (res.code == 200) {
                                that.$message.success(res.data.message)
                                that.loadTree()
                                that.onClearSelected()
                            } else {
                                that.$message.warning(res.data.message)
                            }
                        })
                    },
                })
            }
        },
        nodeModalOk() {
            this.loadTree()
        },
        nodeModalClose() {},
        hide() {
            this.visible = false
        },
        onCheck(checkedKeys, info) {
            console.log('onCheck', checkedKeys, info)
            this.hiding = false
            //this.checkedKeys = checkedKeys.checked
            // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
            if (this.checkStrictly) {
                this.checkedKeys = checkedKeys.checked
            } else {
                this.checkedKeys = checkedKeys
            }
            // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
        },
        onSelect(selectedKeys, e) {
            console.log('selected', selectedKeys, e)
            this.hiding = false
            let record = e.node.dataRef
            let params = {}
            params.id = record.id
            this.getTreeByParams(params)
            queryMaterialCategoryById(params).then((res) => {
                if (res && res.code == 200) {
                    if (res.data) {
                        record.name = res.data.name
                        record.serialNo = res.data.serialNo
                        record.parentId = res.data.parentId
                        record.sort = res.data.sort
                        record.remark = res.data.remark
                        console.log('onSelect-record', record)
                        this.currSelected = Object.assign({}, record)
                        this.model = this.currSelected
                        this.selectedKeys = [record.key]
                        this.model.parentId = record.parentId
                        this.setValuesToForm(record)
                    }
                }
            })
        },
        //根据类别id加载类别树
        getTreeByParams(params) {
            queryMaterialCategoryTreeList(params).then((res) => {
                if (res) {
                    this.treeData = []
                    for (let i = 0; i < res.length; i++) {
                        this.treeData.push(res[i])
                    }
                }
            })
        },
        // 触发onSelect事件时,为类别树右侧的form表单赋值
        setValuesToForm(record) {
            this.$nextTick(() => {
                this.form.setFieldsValue(pick(record, 'name', 'serialNo', 'parentId', 'sort', 'remark'))
            })
        },
        getCurrSelectedTitle() {
            return !this.currSelected.title ? '' : this.currSelected.title
        },
        onClearSelected() {
            this.hiding = true
            this.checkedKeys = []
            this.currSelected = {}
            this.form.resetFields()
            this.selectedKeys = []
        },
        handleNodeTypeChange(val) {
            this.currSelected.nodeType = val
        },
        notifyTriggerTypeChange(value) {
            this.currSelected.notifyTriggerType = value
        },
        receiptTriggerTypeChange(value) {
            this.currSelected.receiptTriggerType = value
        },
        submitCurrForm() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    if (!this.currSelected.id) {
                        this.$message.warning('请点击选择要修改类别!')
                        return
                    }
                    let formData = Object.assign(this.currSelected, values)
                    console.log('Received values of form: ', formData)
                    httpAction(this.url.edit, formData, 'put').then((res) => {
                        if (res.code == 200) {
                            this.$message.success('保存成功!')
                            this.loadTree()
                            let params = {}
                            params.id = formData.id
                            this.getTreeByParams(params)
                        } else {
                            this.$message.warning(res.data.message)
                        }
                    })
                }
            })
        },
        emptyCurrForm() {
            this.form.resetFields()
        },
        nodeSettingFormSubmit() {
            this.form.validateFields((err, values) => {
                if (!err) {
                    console.log('Received values of form: ', values)
                }
            })
        },
        openSelect() {
            this.$refs.sysDirectiveModal.show()
        },
        validateName(rule, value, callback) {
            let params = {
                name: value,
                id: this.model.id ? this.model.id : 0,
            }
            checkMaterialCategory(params).then((res) => {
                if (res && res.code === 200) {
                    if (!res.data.status) {
                        callback()
                    } else {
                        callback('名称已经存在')
                    }
                } else {
                    callback(res.data)
                }
            })
        },
        handleAdd() {
            this.$refs.materialCategoryModal.add()
            this.$refs.materialCategoryModal.title = '新增'
        },
        selectDirectiveOk(record) {
            console.log('选中指令数据', record)
            this.nodeSettingForm.setFieldsValue({ directiveCode: record.directiveCode })
            this.currSelected.sysCode = record.sysCode
        },
        getFlowGraphData(node) {
            this.graphDatasource.nodes.push({
                id: node.id,
                text: node.flowNodeName,
            })
            if (node.children.length > 0) {
                for (let a = 0; a < node.children.length; a++) {
                    let temp = node.children[a]
                    this.graphDatasource.edges.push({
                        source: node.id,
                        target: temp.id,
                    })
                    this.getFlowGraphData(temp)
                }
            }
        },
        // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>
        expandAll() {
            this.iExpandedKeys = this.allTreeKeys
        },
        closeAll() {
            this.iExpandedKeys = []
        },
        checkALL() {
            this.checkStriccheckStrictlytly = false
            this.checkedKeys = this.allTreeKeys
        },
        cancelCheckALL() {
            //this.checkedKeys = this.defaultCheckedKeys
            this.checkedKeys = []
        },
        switchCheckStrictly(v) {
            if (v == 1) {
                this.checkStrictly = false
            } else if (v == 2) {
                this.checkStrictly = true
            }
        },
        getAllKeys(node) {
            // console.log('node',node);
            this.allTreeKeys.push(node.key)
            if (node.children && node.children.length > 0) {
                for (let a = 0; a < node.children.length; a++) {
                    this.getAllKeys(node.children[a])
                }
            }
        },
        // <!---- author:os_chengtgen -- date:20190827 --  for:切换父子勾选模式 =======------>

        onTreeSearch(val) {
            let originalData = JSON.parse(JSON.stringify(this.categoryTree))
            this.currSelected = {}
            this.checkedKeys = []
            this.selectedKeys = []
            if (!val) {
                this.filteredTreeData = originalData
                return
            }
            const filter = (data) => {
                return data.filter((item) => {
                    const match = item.title.toLowerCase().includes(val.toLowerCase())
                    if (item.children && item.children.length > 0) {
                        item.children = filter(item.children)
                    }
                    return match || (item.children && item.children.length > 0)
                })
            }
            this.filteredTreeData = filter(originalData)
        },
    },
    created() {
        this.currFlowId = this.$route.params.id
        this.currFlowName = this.$route.params.name
        // this.loadTree()
    },
}
</script>
<style scoped>
.ant-card-body .table-operator {
    margin: 15px;
}

.anty-form-btn {
    width: 100%;
    text-align: center;
}

.anty-form-btn button {
    margin: 0 5px;
}

.anty-node-layout .ant-layout-header {
    padding-right: 0;
}

.header {
    padding: 0 8px;
}

.header button {
    margin: 0 3px;
}

.ant-modal-cust-warp {
    height: 100%;
}

.ant-modal-cust-warp .ant-modal-body {
    height: calc(100% - 110px) !important;
    overflow-y: auto;
}

.ant-modal-cust-warp .ant-modal-content {
    height: 90% !important;
    overflow-y: hidden;
}

#app .desktop {
    height: auto !important;
}

/** Button按钮间距 */
.ant-btn {
    margin-left: 3px;
}

.drawer-bootom-button {
    /*position: absolute;*/
    bottom: 0;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: left;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
}
</style>